import React, {PureComponent, Fragment} from 'react';
import {
  Switch,
} from 'antd';
import {connect} from 'dva';
import Map from 'ol/Map';
import Overlay from 'ol/Overlay';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import moment from 'moment';
import GeoJSON from 'ol/format/GeoJSON';
import find from 'lodash/find';
import debounce from 'lodash/debounce';
import {DragBox, Select} from 'ol/interaction';
import BuildModalTitle from '@/components/BuildModalTitle';
import {boundingExtent, getCenter} from 'ol/extent';
import request from '@/utils/request';
// 图层
import {Vector} from 'ol/layer';
// 数据源
import {Vector as VectorSource} from 'ol/source';
// 要素
import Feature from 'ol/Feature';
// 样式
import {Icon, Style, Text, Fill, Stroke} from 'ol/style';
import LineString from 'ol/geom/LineString';
import Point from 'ol/geom/Point';
// 坐标系转化
import {fromLonLat, toLonLat} from 'ol/proj';
import {getArea, getLength} from 'ol/sphere';
import CircleStyle from 'ol/style/Circle';
import Draw from 'ol/interaction/Draw';
import Polygon from 'ol/geom/Polygon';
import {unByKey} from 'ol/Observable';
import arrow from './../../images/arraw2.png'
import XYZ from "ol/source/XYZ";

@connect(({devices, loading}) => ({
  devices
}))
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollInterval = '';
    this.map = null;
    this.state = {
      boxH: 0,
      listMarginTop: '0',
      animate: false,
      auto: true,
    };
  }


  componentDidMount() {
    var layers = [
      new TileLayer({
        title: '天地图卫星影像',
        visible: true,
        source: new XYZ({
          url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=7daf40ef5b68a447415db92f74abc29c',
        }),
      }),
      new TileLayer({
        title: '天地图矢量图',
        visible: false,
        source: new XYZ({
          url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=7daf40ef5b68a447415db92f74abc29c',
        }),
      }),
      new TileLayer({
        title: '卫星标注',
        visible: true,
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=7daf40ef5b68a447415db92f74abc29c',
        }),
      }),
      new TileLayer({
        title: '矢量图标注',
        visible: false,
        source: new XYZ({
          url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=7daf40ef5b68a447415db92f74abc29c',
        }),
      }),

    ];
    var map=this.map = new Map({
      target: 'mapDiv',
      layers: layers,
      view: new View({
        center: fromLonLat([89.19137594615009, 42.99314141348188],),//经纬度
        zoom: 15,
        maxZoom: 18,
        minZoom: 11.5,
      }),
    });
   /* var layer = new Vector({})
    var source = new VectorSource();
    layer.setSource(source);
    map.addLayer(layer);
    var feature;
    let arr=[
      fromLonLat([99.64064006712545, 39.57211613643938]),
        fromLonLat([99.64149080182347, 39.57246995882144]),
          fromLonLat([99.64311537333242, 39.573145621589674]),
            fromLonLat([99.64381486128156, 39.572191381856385]),
              fromLonLat( [99.64442816904665, 39.571354708917454])
    ];
    feature = new Feature({
      geometry: new LineString(arr)
    });
    source.addFeature(feature);
    var stylesFunction=function () {
      let resolution=map.getView().getResolution(); //分辨率:一个像素代表的距离
      var geometry =  feature.getGeometry(); //几何对象:空间坐标信息等
      var length = geometry.getLength(); //长度:线几何对象的长度
      var radio = (100 * resolution) / length; //间隔分之一 分割了多少段
      var dradio = 100000000; //投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
      // 线段样式
      var styles = [
        new Style({
          stroke: new Stroke({
            color: "green",
            width: 20,
          })
        })
      ];

      // 添加箭头样式
      for (var i = 0; i <= 1; i += radio) {
        var arrowLocation = geometry.getCoordinateAt(i);
        geometry.forEachSegment(function (start, end) {
          // 暂时不考虑这种情况
          // if (start[0] == end[0] || start[1] == end[1]) return;
          var dx1 = end[0] - arrowLocation[0];
          var dy1 = end[1] - arrowLocation[1];
          var dx2 = arrowLocation[0] - start[0];
          var dy2 = arrowLocation[1] - start[1];
          if (dx1 != dx2 && dy1 != dy2) {
            if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) < 0.001) {
              var dx = end[0] - start[0];
              var dy = end[1] - start[1];
              var rotation = Math.atan2(dy, dx);  // 得到箭头方向角
              styles.push(
                new Style({
                  geometry: new Point(arrowLocation),
                  image: new Icon({
                    src: arrow,
                    anchor: [0.75, 0.5],
                    scale:0.15,
                    rotateWithView: false,
                    color:'white',
                    rotation: -rotation

                  })
                })
              );
            }
          }
        });
      }
      return styles;
    }
    feature.setStyle(stylesFunction);
    return*/
    var line_feature = new Feature();

    var line_geom = new LineString([ fromLonLat([89.19137594615009, 42.99314141348188]),
      fromLonLat([89.27433820320124, 42.98793991970305]),
      fromLonLat([89.26429907293623, 42.9388610412895]),
      fromLonLat([89.17046109143132, 42.93957556766753])]);

    line_feature.setGeometry(line_geom)

    var styles = function (feature) {
      // var geometry = this.getGeometry();
      var geometry =  line_feature.getGeometry(); //几何对象:空间坐标信息等
      let resolution=map.getView().getResolution(); //分辨率:一个像素代表的距离
      // var geometry =  feature.getGeometry(); //几何对象:空间坐标信息等
      var length = geometry.getLength(); //长度:线几何对象的长度
      var radio = (500 * resolution) / length; //间隔分之一 分割了多少段,改变500改变间隔
      console.log('radio',radio)
      var dradio = 100000000; //投影坐标系，如3857等，在EPSG:4326下可以设置dradio=10000
      var styles = [
        new Style({
          stroke: new Stroke({
            color: "green",
            width: 10,
          })
        })
      ];
      for (var i = 0; i <= 1; i += radio) {
        console.log('i',i)
        var arrowLocation = geometry.getCoordinateAt(i);
        geometry.forEachSegment(function (start, end) {
          if (start[0] == end[0] || start[1] == end[1]) return;
          var dx1 = end[0] - arrowLocation[0];
          var dy1 = end[1] - arrowLocation[1];
          var dx2 = arrowLocation[0] - start[0];
          var dy2 = arrowLocation[1] - start[1];
          if (dx1 != dx2 && dy1 != dy2) {
            console.log(Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) )
            if (Math.abs(dradio * dx1 * dy2 - dradio * dx2 * dy1) <1000) {
              var dx = end[0] - start[0];
              var dy = end[1] - start[1];
              var rotation = Math.atan2(dy, dx);
              // console.log('rotation',rotation)
              styles.push(new Style({
                geometry: new Point(arrowLocation),
                image: new Icon({
                  src: arrow,
                  anchor: [0.5, 0.5],
                  scale:0.04,
                  rotateWithView: false,
                  color:'white',
                  rotation: -rotation+ Math.PI*-0.5
                })
              }));
            }
          }
        });
      }
      return styles;
    }
    console.log('line_feature',line_feature)
    line_feature.setStyle(styles());
    var polyLineLayer = new Vector({

      source: new VectorSource({

        features: [line_feature]

      }),

    });
    this.map.addLayer(polyLineLayer);

  }


  render() {
    const {dispatch} = this.props;
    return <div style={{width: '100%', height: '100%'}} id={'mapDiv'}>

    </div>;
  }
}

export default BasicList;
